<template>
  <div class="all">
    <head-search></head-search>
    <div class="title_data">
      <div class="item">
        <div class="num">{{title_data.franchisee_count}}</div>
        <div class="text">加盟商总数</div>
      </div>
      <div class="item">
        <div class="num">{{title_data.car_count}}</div>
        <div class="text">加盟车总数</div>
      </div>
    </div>

    <div class="time_prograss">
      <div class="time_title">
        本月时间进度
      </div>
      <van-progress class="month-prograss" color="linear-gradient(90deg, rgba(244, 157, 46, 1) , rgba(236, 104, 21, 1))"
        pivot-color="rgba(236, 104, 21, 1)" :percentage="title_data.time_progress" stroke-width="12" />
    </div>
    <div class="time_prograss">
      <div class="time_title">
        本月任务进度
      </div>

      <prograss-card title_bar="新增加盟商数量" :in_data="title_data.franchisee_add" ></prograss-card>
      <prograss-card title_bar="新增加盟车数量" :in_data="title_data.car_add"></prograss-card>
      <prograss-card title_bar="加盟商预存款总金额" :in_data="title_data.franchisee_recharge"></prograss-card>
    </div>

  </div>
</template>

<script>
  import HeadSearch from '@/components/HeadSearch';
  import {
    HomeService
  } from '@/api'
import PrograssCard from './newcomponent/PrograssCard.vue';
  export default {
    components: {
      HeadSearch,
        PrograssCard,
    },
    mounted() {
      this.init();
      this.$EventBus.$on("change_list", () => {
        this.init();
      })
    },
    data() {
      return {
        title_data: {
          franchisee_count: 0,
          car_count: 0,
          time_progress: 0,
          franchisee_add: {},
          car_add: {},
          franchisee_recharge: {},
        }
      }
    },
    methods: {
      init() {
        let data = {};
        if (this.$store.state.search_id) {
          data.user_id = this.$store.state.search_id;
        }

        HomeService.getResult(data).then(res => {
          console.log(res);
        })
        HomeService.getTotal(data).then(res => {
          console.log(res)
          this.title_data.franchisee_count = res.data.franchisee_count
          this.title_data.car_count = res.data.car_count
          this.title_data.time_progress = (res.data.time_progress * 100).toFixed(2)
          this.title_data.franchisee_add = res.data.franchisee_add 
          this.title_data.car_add = res.data.car_add
          this.title_data.franchisee_recharge = res.data.franchisee_recharge

        });
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/.van-progress{
    border-radius: 12px;
  }

  /deep/.van-progress__pivot{
    border-radius: 0px;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
  }

  .all {
    margin: 0;
    padding: 0;
    background-color: #f3f5f7;
    min-height: calc(93vh);
    box-sizing: border-box;

    .title_data {
      display: flex;
      justify-content: center;

      .item {
        width: 331px;
        height: 82px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 8px;
        margin-left: 40px;
        display: flex;
        flex-direction: column;
        color: rgba(112, 112, 112, 1);
        align-items: center;
        justify-content: center;

        .num {
          font-size: 38px;
          font-weight: bold;
        }

        .text {
          font-size: 14px;
        }

      }

      .item:first-child {
        margin-left: 0px;
      }
    }

    .time_prograss {
      padding: 20px 24px;

      .time_title {
        margin: 30px 0 30px 0;
        color: rgba(51, 51, 51, 1);
        font-size: 24px;
      }

      .month-prograss{
        margin: 0 50px;
      }


      
    }


  }
</style>